<template>
  <div id="app">
    <button @click="handleAdd('input')">添加输入框</button>
    <button @click="handleAdd('date')">添加日期</button>
    <button @click="handleAdd('time')">添加时间</button>
    <button @click="handleAdd('radio')">添加按钮</button>
    <button @click="handleAdd('checkbox')">添加选中</button>
    <button @click="handleAdd('img', 'jia')">添加甲方签名</button>
    <button @click="handleAdd('img', 'yi')">添加乙方签名</button>
    <button @click="getValue">获取value</button>
    <editor
      style="width: 100%; height: 500px"
      api-key="442y290atvj552xm6dniegkiwtw0su51stkals22c0eyjhj0"
      :init="{
        plugins: 'lists link image table code help wordcount',
        plugins: 'pagebreak',
        toolbar: 'pagebreak',
      }"
      v-model="data"
      @input="changeValue"
      ref="editor"
    />
    <!-- <textarea id="mytextarea">Hello, World! <input></textarea> -->
  </div>
</template>

<script>
import Editor from "@tinymce/tinymce-vue";
// import tinymce from "tinymce";
export default {
  name: "app",
  data() {
    return {
      data: "1213",
      idList: [],
      x: 100,
      y: 200,
    };
  },
  components: {
    editor: Editor,
  },
  methods: {
    changeValue(val) {
      this.data = val;
    },
    changePosition() {
      return;
    },
    insertImg(editor, { path, id }) {
      editor.undoManager.transact(function () {
        editor.focus();
        editor.selection.setContent(
          editor.dom.createHTML("img", {
            src: path,
            id: id,
            name: "jia",
            style: "width:100px;50px;transition:1s",
          })
        );
      });
    },
    insertImg2(editor, { path, id }) {
      var that = this;
      editor.undoManager.transact(function () {
        editor.focus();
        editor.selection.setContent(
          editor.dom.createHTML("img", {
            src: path,
            id: id,
            name: "yi",
            style: "width:100px;50px;transition:0s;position:relative;",
          })
        );

        var dragging = false;
        var position = null;
        //1、鼠标按下
        editor.dom.doc.getElementById(id).onmousedown = function (e) {
          //事件对象
          // var x = prompt("水平位置px(默认100)", 100);
          // var y = prompt("垂直位置px(默认100)", 100);
          // editor.dom.doc.getElementById(id).style.top = x + "px";
          // editor.dom.doc.getElementById(id).style.left = y + "px";
          dragging = true; // 正在移动

          position = [e.clientX, e.clientY];
        };
        editor.dom.doc.getElementById(id).onmousemove = function (e) {
          if (dragging === false) {
            return;
          }
          const x = e.clientX;
          const y = e.clientY;
          console.log(x, y);
          const deltaX = x - position[0];
          const deltaY = y - position[1];
          const left = parseInt(
            editor.dom.doc.getElementById(id).style.left || 0
          );
          const top = parseInt(
            editor.dom.doc.getElementById(id).style.top || 0
          );
          editor.dom.doc.getElementById(id).style.left = left + deltaX + "px";
          editor.dom.doc.getElementById(id).style.top = top + deltaY + "px";
          position = [x, y];
        };

        editor.dom.doc.getElementById(id).onmouseup = function () {
          dragging = false;
          // editor.dom.doc.getElementById(id).onmousemove = null; //鼠标松开取消移动时候的效果
        };
      });
    },
    insertInput(editor, type, id) {
      editor.undoManager.transact(function () {
        editor.focus();
        editor.selection.setContent(
          editor.dom.createHTML("input", { type: type, id: id, name: id })
        );
        if ((type = "input")) {
          editor.dom.doc
            .querySelector("#" + id)
            .addEventListener("change", function (e) {
              editor.dom.doc
                .querySelector(`#${id}`)
                .setAttribute("value", e.target.value);
            });
        }
      });
    },
    getValue(editor) {
      editor = this.$refs.editor.editor;
      editor.undoManager.transact(function () {
        editor.selection.dom.get("key0").setAttribute("checked", true);
      });
    },
    handleAdd(type, name) {
      if (type == "input") {
        let id = "key" + this.idList.length;
        this.idList.push(id);
        this.insertInput(this.$refs.editor.editor, "text", id);
      }
      if (type == "date") {
        let id = "key" + this.idList.length;
        this.idList.push(id);
        this.insertInput(this.$refs.editor.editor, "date", id);
      }
      if (type == "time") {
        let id = "key" + this.idList.length;
        this.idList.push(id);
        this.insertInput(this.$refs.editor.editor, "time", id);
      }
      if (type == "radio") {
        let id = "key" + this.idList.length;
        this.idList.push(id);

        this.insertInput(this.$refs.editor.editor, "radio", id);
        this.insertInput(this.$refs.editor.editor, "radio", id);
        // this.insertWord(this.$refs.editor.editor);
        // this.insertInput(this.$refs.editor.editor, "radio", id);
        // this.data =
        //   this.data +
        //   `<input value='' type='radio' id="${id}" name="${id}" checked="checked"/>是<input value='' type='radio' id="${id}" name="${id}" />否`;
      }

      if (type == "checkbox") {
        let id = "key" + this.idList.length;
        this.idList.push(id);
        this.insertInput(this.$refs.editor.editor, "checkbox", id);
      }
      if (type == "img") {
        let id = "key" + this.idList.length;
        this.idList.push(id);
        if (name == "jia") {
          let path =
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.tukuppt.com%2Fpng_preview%2F00%2F16%2F86%2Fs5CBMjGe36.jpg%21%2Ffw%2F780&refer=http%3A%2F%2Fimg.tukuppt.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1660614018&t=97fe009e4aef40837a1ac1d177b0570e";
          this.insertImg(this.$refs.editor.editor, { path, id });
        }
        if (name == "yi") {
          let path =
            "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.51yuansu.com%2Fpic3%2Fcover%2F00%2F74%2F50%2F58b828216ff6e_610.jpg&refer=http%3A%2F%2Fbpic.51yuansu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1660614018&t=4d65c551c9ff2380671eed6d3ea81b96";
          this.insertImg2(this.$refs.editor.editor, { path, id });
        }
      }

      // this.data = this.data.replace("<p>", "").replace("</p>", "");
      // console.log(this.data, "debugger");
    },
  },
  mounted() {},
};
</script>
<style>
.pagebreak {
  display: block;
  clear: both !important;
  cursor: move !important;
  height: 100% !important;
  margin: 0;
  background: url("' + me.options.UEDITOR_HOME_URL + '/themes/default/images/ph-jt-divide.png")
    " + " no-repeat center;
  height: 16px;
  border: none 0;
}
</style>
